<template>
  <div id="cesiumContainer"></div>
  <div class="infoBox">
    <div class="operatorButton">
      <div class="buttonContent">

        <el-card header="操作">
          <el-button :type="remarkPointEnable ? 'danger' : 'success' " plain @click="enableRemarkPoint">标点</el-button>
          <el-button :type="remarkLineEnable ? 'danger' : 'success' " plain @click="enableRemarkLine">画线</el-button>
          <el-button :type="remarkAreaEnable ? 'danger' : 'success' " plain @click="enableRemarkArea">绘制面</el-button>
          <el-button type="success" plain @click="removeAllPoint">清空点</el-button>
        </el-card>
        <el-card header="位置">
          <el-button type="success" v-for="item in station" plain @click="flyToPosition(item.cameraPosition)">
            {{ item.nickName }}
          </el-button>
        </el-card>

      </div>
    </div>
    <div class="cameraPosition">
      <el-descriptions title="相机参数" :column="1" border>
        <template #extra>
          <el-button type="primary" size="small" @click="copyCameraPosition">复制</el-button>
        </template>
        <el-descriptions-item label-width="80" label="longitude">
          <template #label>
            <div class="cell-item">
              经度
            </div>
          </template>
          {{ cameraPosition.longitude }}
        </el-descriptions-item>
        <el-descriptions-item label-width="80" label="longitude">
          <template #label>
            <div class="cell-item">
              维度
            </div>
          </template>
          {{ cameraPosition.latitude }}
        </el-descriptions-item>
        <el-descriptions-item label-width="80" label="longitude">
          <template #label>
            <div class="cell-item">
              高程
            </div>
          </template>
          {{ cameraPosition.height }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="鼠标参数" :column="1" border>
        <template #extra>
          <el-button type="primary" size="small" @click="copyMousePosition">复制</el-button>
        </template>
        <el-descriptions-item label-width="80" label="longitude">
          <template #label>
            <div class="cell-item">
              经度
            </div>
          </template>
          {{ mousePosition.longitude }}
        </el-descriptions-item>
        <el-descriptions-item label-width="80" label="longitude">
          <template #label>
            <div class="cell-item">
              维度
            </div>
          </template>
          {{ mousePosition.latitude }}
        </el-descriptions-item>
        <el-descriptions-item label-width="80" label="longitude">
          <template #label>
            <div class="cell-item">
              高程
            </div>
          </template>
          {{ mousePosition.height }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
  <div class="modelBox">

  </div>
</template>

<script>
import {onMounted, onUnmounted, ref} from 'vue';
import * as Cesium from 'cesium';
import {ElMessage} from 'element-plus'

export default {
  name: 'CesiumViewer',

  setup() {
    let viewer;
    let initPosition = JSON.parse('{"longitude":108.66514578787714,"latitude":34.45205877723222,"height":455.126247879714,"pitch":-49.96247439379652,"heading":341.5420249276734,"roll":0.0028439543597515095}');
    let points = ref([])
    let lines = ref([])
    let areas = ref([])
    let remarkPointEnable = ref(false)
    let remarkLineEnable = ref(false)
    let remarkAreaEnable = ref(false)
    let station = ref([
      {
        name: 'xianYang',
        nickName: '咸阳站',
        modelPath: 'xianyang',
        cameraPosition: JSON.parse('{"longitude":108.66514578787714,"latitude":34.45205877723222,"height":455.126247879714,"pitch":-90,"heading":341.5420249276734,"roll":0.0028439543597515095}'),
      },
      // {
      //   name: 'xianYang',
      //   nickName: '南宁站',
      //   modelPath: 'nanning',
      //   cameraPosition: JSON.parse('{"longitude":108.45111771828245,"latitude":22.860336599895182,"height":455.424011971474,"pitch":-90,"heading":341.5420192592583,"roll":0.002851358017637475}'),
      // },
      // {
      //   name: 'xianYang',
      //   nickName: '北海站',
      //   modelPath: 'beihai',
      //   cameraPosition: JSON.parse('{"longitude":109.50865813816624,"latitude":21.488422686850175,"height":455.279368933516,"pitch":-90,"heading":320.5403622475006,"roll":0.0033987814262569525}'),
      // }
    ])
    let models = []
    let tempEntity;
    let entities = []


    let cameraPosition = ref({
      longitude: 0,
      latitude: 0,
      height: 0,
      pitch: 0,
      heading: 0,
      roll: 0
    });
    let mousePosition = ref({
      longitude: 0,
      latitude: 0,
      height: 0,
      pitch: 0,
      heading: 0,
      roll: 0
    });
    let handler;

    function enableRemarkLine() {
      remarkLineEnable.value = !remarkLineEnable.value;
      // viewer.scene.mode = remarkLineEnable.value ? Cesium.SceneMode.SCENE2D : Cesium.SceneMode.SCENE3D;
      viewer.camera.orientation = {
        heading: 0,
        pitch: -90,
        roll: 0,
      }
    }

    function removeAllPoint() {
      points.value = []
      lines.value = []
      areas.value = []
      models = []
      viewer.entities.removeAll();
    }

    function enableRemarkPoint() {
      remarkPointEnable.value = !remarkPointEnable.value;
      // viewer.scene.mode = remarkPointEnable.value ? Cesium.SceneMode.SCENE2D : Cesium.SceneMode.SCENE3D;
      viewer.camera.orientation = {
        heading: 0,
        pitch: -90,
        roll: 0,
      }
    }

    function enableRemarkArea() {
      remarkAreaEnable.value = !remarkAreaEnable.value;
      console.log(remarkAreaEnable.value)
      // viewer.scene.mode = remarkAreaEnable.value ? Cesium.SceneMode.SCENE2D : Cesium.SceneMode.SCENE3D;
      viewer.camera.orientation = {
        heading: 0,
        pitch: -90,
        roll: 0,
      }
      lockCameraAndMap(!remarkAreaEnable.value)
      if (!remarkAreaEnable.value) {
        areas.value = []
        entities.push(tempEntity)
        viewer.entities.removeAll();
        for (let item of entities) {
          console.log(item);
          viewer.entities.add(item);
        }
      }
    }

    function remarkPoint(enable = false, point = {}) {
      if (!enable) {
        return;
      }
      let name = getShortUUID();
      points.value.push({
        id: name,
        name: name,
        longitude: point.longitude,
        latitude: point.latitude,
        height: 0,
      });
      viewer.entities.removeAll();
      points.value.forEach((item) => {
        viewer.entities.add({
          name: item.id,
          code: item.id,
          id: item.id,
          position: Cesium.Cartesian3.fromDegrees(
              item.longitude * 1,
              item.latitude * 1
          ),
          // 点
          point: {
            pixelSize: 5,
            color: Cesium.Color.RED,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,
          },
          // label: {
          //   // show: false,
          //   text: item.id,
          //   font: "12px monospace",
          //   style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          //   fillColor: Cesium.Color.LIME,
          //   outlineWidth: 4,
          //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直方向以底部来计算标签的位置
          //   pixelOffset: new Cesium.Cartesian2(0, -20), // 偏移量
          // },
          // // 图标
          // billboard: {
          //   image: require("@/assets/logo.png"),
          //   width: 18,
          //   height: 24,
          // },
        })
      })
    }

    function getShortUUID() {
      return Math.random().toString(36).slice(2, 12);
    }

    function remarkLine(enable = false, point = {}) {
      if (!enable) {
        return;
      }
      let name = Math.random().toString(36).slice(2, 9);
      lines.value.push({
        id: name,
        name: name,
        longitude: point.longitude,
        latitude: point.latitude,
        height: 0,
      });
      viewer.entities.removeAll();
      let tempLine = [];
      for (let item of lines.value) {
        tempLine.push(Cesium.Cartesian3.fromDegrees(
            item.longitude * 1,
            item.latitude * 1
        ));
      }
      if (lines.value.length > 1) {
        viewer.entities.add({
          polyline: {
            positions: tempLine,
            width: 2,
            material: Cesium.Color.RED,
            clampToGround: true,	// 这个是线覆盖模型的关键
            zIndex: 100,	// 这个是层级，但是必须clampToGround: true
          }
        })
      } else if (lines.value.length === 1) {
        viewer.entities.add({
          name: lines.value[0].id,
          code: lines.value[0].id,
          id: lines.value[0].id,
          position: Cesium.Cartesian3.fromDegrees(
              lines.value[0].longitude * 1,
              lines.value[0].latitude * 1
          ),
          // 点
          point: {
            pixelSize: 2,
            color: Cesium.Color.RED,
            outlineColor: Cesium.Color.RED,
            outlineWidth: 0,
          },
        })
      }
      console.log(lines.value)
    }

    function remarkArea(enable = false, point = {}) {
      console.log(enable)
      if (!enable) {
        return;
      }
      let name = getShortUUID();
      areas.value.push({
        id: name,
        name: name,
        longitude: point.longitude,
        latitude: point.latitude,
        height: 0,
      });
      viewer.entities.removeAll();
      let tempLine = [];
      for (let item of areas.value) {
        tempLine.push(Cesium.Cartesian3.fromDegrees(
            item.longitude * 1,
            item.latitude * 1
        ));
      }
      if (areas.value.length > 2) {
        viewer.entities.removeAll();
        tempEntity = new Cesium.Entity({
          name: name,
          polygon: {
            hierarchy: tempLine,
            width: 2,
            material: Cesium.Color.fromRandom().withAlpha(0.5),
            outline: true,
            outlineWidth: 2,
            extrudedHeight: 40,
            outlineColor: Cesium.Color.WHITE.withAlpha(0.5)
          }
        });
        viewer.entities.add(tempEntity);
      } else if (areas.value.length === 2) {
        viewer.entities.add({
          polyline: {
            positions: tempLine,
            width: 2,
            material: Cesium.Color.RED,
            clampToGround: true,	// 这个是线覆盖模型的关键
            zIndex: 100,	// 这个是层级，但是必须clampToGround: true
          }
        })
      } else if (areas.value.length === 1) {
        viewer.entities.add({
          name: areas.value[0].id,
          code: areas.value[0].id,
          id: areas.value[0].id,
          position: Cesium.Cartesian3.fromDegrees(
              areas.value[0].longitude * 1,
              areas.value[0].latitude * 1
          ),
          // 点
          point: {
            pixelSize: 2,
            color: Cesium.Color.RED,
            outlineColor: Cesium.Color.RED,
            outlineWidth: 0,
          },
        })
      }

      // let rectangle = new Cesium.Rectangle.fromDegrees(areas.value[0].longitude * 1, areas.value[0].latitude * 1, areas.value[1].longitude * 1, areas.value[1].latitude * 1);
      // console.log(rectangle)
      // viewer.entities.add({
      //   rectangle: {
      //     coordinates: rectangle,
      //     show: true,
      //     material: Cesium.Color.RED.withAlpha(0.5),
      //     outline: true,
      //     outlineColor: Cesium.Color.WHITE.withAlpha(0.5),
      //     outlineWidth: 2,
      //   }
      // })

    }

    function flyToPosition(position) {
      // 相机飞行动画
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, position.height),
        orientation: {
          heading: Cesium.Math.toRadians(position.heading),
          pitch: Cesium.Math.toRadians(position.pitch),
          roll: Cesium.Math.toRadians(position.roll),
        },
        complete: function callback() {
          const rectangle = viewer.camera.computeViewRectangle();
          // models.forEach(item => {
          //
          // })
          // if (models.length > 0) {
          //   let model = models[0];
          //   if (model instanceof Cesium.Cesium3DTileset) {
          //     console.log(model)
          //     console.log(model.tileset)
          //
          //   }
          // }
          ElMessage({
            message: '切换完成',
            type: 'success',
          })
        },
      });
    }

    function getCameraPosition() {
      let temp = Cesium.Cartographic.fromCartesian(viewer.camera.position);
      cameraPosition.value.longitude = Cesium.Math.toDegrees(temp.longitude);
      cameraPosition.value.latitude = Cesium.Math.toDegrees(temp.latitude);
      cameraPosition.value.height = temp.height;
      cameraPosition.value.heading = Cesium.Math.toDegrees(viewer.camera.heading); // 偏航角（绕 Z 轴旋转）
      cameraPosition.value.pitch = Cesium.Math.toDegrees(viewer.camera.pitch);     // 俯仰角（绕 X 轴旋转）
      cameraPosition.value.roll = Cesium.Math.toDegrees(viewer.camera.roll);       // 翻滚角（绕 Y 轴旋转）
    }

    function getMousePosition(movement, isSaveCache = false) {
      // 获取鼠标位置的笛卡尔坐标
      const ray = viewer.camera.getPickRay(movement);
      const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
      // const cartesian = viewer.scene.pickPosition(movement);
      let result = {};

      if (cartesian) {
        // 将笛卡尔坐标转换为经纬度
        const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        if (isSaveCache) {
          mousePosition.value.longitude = Cesium.Math.toDegrees(cartographic.longitude); // 经度
          mousePosition.value.latitude = Cesium.Math.toDegrees(cartographic.latitude);   // 纬度
          mousePosition.value.height = cartographic.height;   // 纬度
          mousePosition.value.heading = Cesium.Math.toDegrees(viewer.camera.heading); // 偏航角（绕 Z 轴旋转）
          mousePosition.value.pitch = Cesium.Math.toDegrees(viewer.camera.pitch);     // 俯仰角（绕 X 轴旋转）
          mousePosition.value.roll = Cesium.Math.toDegrees(viewer.camera.roll);       // 翻滚角（绕 Y 轴旋转）
        }
        result = {
          longitude: Cesium.Math.toDegrees(cartographic.longitude),
          latitude: Cesium.Math.toDegrees(cartographic.latitude),
          height: Cesium.Math.toDegrees(cartographic.height),
        }

      }

      return result;
    }

    function registerMouseLeftEvent() {
      // 监听鼠标移动事件
      handler.setInputAction((movement) => {
        getMousePosition(movement.endPosition, true);
        // 顺手计算相机位置
        getCameraPosition();
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    }

    function registerModelClickEvent() {
      handler.setInputAction((movement) => {
        // 获取点击的模型
        const pickedObject = viewer.scene.pick(movement.position);
        if (Cesium.defined(pickedObject) ) {
          console.log(pickedObject);
          // console.log(pickedObject.getProperty("name"))
          // console.log(pickedObject.getProperty("Height"))
          /*model.tilesLoaded.addEventListener((tile) => {
            const content = tile.content;
            const featuresLength = content.featuresLength;

            // 遍历所有要素
            for (let i = 0; i < featuresLength; i++) {
              const feature = content.getFeature(i);

              // 检查要素是否是建筑物
              if (feature instanceof Cesium.Cesium3DTileFeature) {
                console.log(feature);
              }
            }
          });*/
          // console.log(model);
        }
        // 标点
        let result = getMousePosition(movement.position, false);
        remarkPoint(remarkPointEnable.value, result);
        remarkLine(remarkLineEnable.value, result);
        remarkArea(remarkAreaEnable.value, result);
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    }

    function lockCameraAndMap(flag = true) {
      // 如果为真，则允许用户旋转相机。如果为假，相机将锁定到当前标题。此标志仅适用于2D和3D。
      viewer.scene.screenSpaceCameraController.enableRotate = flag;
      // 如果为true，则允许用户平移地图。如果为假，相机将保持锁定在当前位置。此标志仅适用于2D和Columbus视图模式。
      viewer.scene.screenSpaceCameraController.enableTranslate = flag;
      // 如果为真，允许用户放大和缩小。如果为假，相机将锁定到距离椭圆体的当前距离
      viewer.scene.screenSpaceCameraController.enableZoom = flag;
      // 如果为真，则允许用户倾斜相机。如果为假，相机将锁定到当前标题。这个标志只适用于3D和哥伦布视图。
      viewer.scene.screenSpaceCameraController.enableTilt = flag;
    }

    function registerMouseMove() {
      handler.setInputAction((movement) => {
        // if (!(remarkAreaEnable.value && isPainting)) {
        //   return;
        // }
        // let startPosition = getMousePosition(movement.endPosition, false);
        // if (startPosition.longitude > areaWest) {
        //   areaEast = startPosition.longitude;
        // } else {
        //   areaEast = areaWest;
        //   areaWest = startPosition.longitude;
        // }
        // if (startPosition.latitude > areaSouth) {
        //   areaNorth = startPosition.latitude;
        // } else {
        //   areaNorth = areaSouth;
        //   areaSouth = startPosition.latitude;
        // }
        // viewer.entities.removeAll();
        // let rectangle = new Cesium.Rectangle.fromDegrees(areaWest, areaSouth, areaEast, areaNorth);
        // viewer.entities.add({
        //   rectangle: {
        //     coordinates: rectangle,
        //     show: true,
        //     material: Cesium.Color.RED.withAlpha(0.5),
        //     outline: true,
        //     outlineColor: Cesium.Color.WHITE.withAlpha(0.5),
        //     outlineWidth: 2,
        //   }
        // })
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    }

    function registerMouseUp() {
      handler.setInputAction((movement) => {
        // if (!remarkAreaEnable.value) {
        //   return;
        // }
        // let startPosition = getMousePosition(movement.position, false);
        // areas.value.push(startPosition);
        // remarkArea(remarkAreaEnable.value);
        // isPainting = false;
      }, Cesium.ScreenSpaceEventType.LEFT_UP);
    }

    function registerMouseDown() {
      handler.setInputAction((movement) => {
        // areas.value = []
        // if (!remarkAreaEnable.value) {
        //   return;
        // }
        // let startPosition = getMousePosition(movement.position, false);
        // areaWest = startPosition.longitude;
        // areaSouth = startPosition.latitude;
        // isPainting = true
        // areas.value.push(startPosition);
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
    }

    function copyCameraPosition() {
      navigator.clipboard.writeText(JSON.stringify(cameraPosition.value));
      ElMessage({
        message: '复制成功',
        type: 'success',
      })
    }

    function copyMousePosition() {
      navigator.clipboard.writeText(JSON.stringify(mousePosition.value));
      ElMessage({
        message: '复制成功',
        type: 'success',
      })
    }


    async function initViewer() {
      // 设置 Cesium 的 token（如果你有的话）
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmN2ZiMjc2OC1hZjNkLTRhYjAtYWQzNS1mMWY2N2RiNjFjYjIiLCJpZCI6MjU5LCJpYXQiOjE3MzA0Mzc2NTZ9.dehTDIqForKmRI-vpLLozJwjpzMbsJa3SM-qMpHHL_U';

      // 创建 Cesium Viewer
      viewer = new Cesium.Viewer('cesiumContainer', {
        selectionIndicator: false,
        homeButton: false,
        animation: false,  //是否显示动画控件
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false,  //是否显示点击要素之后显示的信息
        fullscreenButton: false,   //是否显示全屏
        shadows: true,
        msaaSamples: 8
      });
      window.cesiumViewer = viewer;

      let terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl("http://localhost:8090/terrain", {
        requestWaterMask: true,
        requestMetadata: true,
        requestVertexNormals: true,
        ellipsoid: Cesium.Ellipsoid.WGS84
      })
      viewer.terrainProvider = terrainProvider;
      viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&tk=7a62238db5f8ba578af3ee2261ad5bb0',
        layer: 'img',
        style: 'default',
        format: 'tiles',
        tileMatrixSetID: 'w',
        tileWidth: 256,
        tileHeight: 256,
        maximumLevel: 18,
      }));
      viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&tk=7a62238db5f8ba578af3ee2261ad5bb0',
        layer: 'cia',
        style: 'default',
        format: 'tiles',
        tileMatrixSetID: 'w',
        tileWidth: 256,
        tileHeight: 256,
        maximumLevel: 18,
      }));
      for (const item of station.value) {
        const building = await Cesium.Cesium3DTileset.fromUrl('http://localhost:8090/models/' + item.modelPath + '/JZ/tileset.json', {
          show: true,
          shadows: Cesium.ShadowMode.DISABLED,
        })
        viewer.scene.primitives.add(building);
        building.maximumScreenSpaceError = 16;

        const terrain = await Cesium.Cesium3DTileset.fromUrl('http://localhost:8090/models/' + item.modelPath + '/DX/tileset.json', {
          show: true,
          shadows: Cesium.ShadowMode.DISABLED,
        })
        viewer.scene.primitives.add(terrain);
        terrain.maximumScreenSpaceError = 16;
        models.push(terrain)
        models.push(building)

        // // 在模型加载完成后输出经纬度
        // terrain.readyPromise.then(() => {
        const boundingSphere = terrain.boundingSphere;
        const centerCartesian = boundingSphere.center;
        const centerCartographic = Cesium.Cartographic.fromCartesian(centerCartesian);
        const longitude = Cesium.Math.toDegrees(centerCartographic.longitude);
        const latitude = Cesium.Math.toDegrees(centerCartographic.latitude);
        const height = centerCartographic.height;

        console.log(`模型中心经度: ${longitude}, 纬度: ${latitude}, 高度: ${height}`);
        // }).catch((error) => {
        //   console.error('模型加载失败:', error);
        // });

      }


      viewer._cesiumWidget._creditContainer.style.display = 'none'
      // viewer.camera.setView({
      //   destination: Cesium.Rectangle.fromDegrees(106.99971199035645,35.00012397766113,110.00018119812012,32.99975395202637)
      // })
      viewer.scene.globe.show = true;
      viewer.imageryLayers.get(0).alpha = 0.5;
      viewer.scene.globe.enableLighting = true;
      flyToPosition(initPosition);
    }

    // 组件挂载时初始化 Cesium
    onMounted(() => {

      initViewer();
      // 创建事件处理器
      handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      registerMouseLeftEvent();
      registerModelClickEvent();
      // registerMouseUp();
      registerMouseDown();
      registerMouseMove();
    });

    // 组件卸载时销毁 Cesium Viewer
    onUnmounted(() => {
      if (viewer) {
        viewer.destroy();
      }
    });

    return {
      mousePosition,
      cameraPosition,
      copyCameraPosition,
      copyMousePosition,
      flyToPosition,
      enableRemarkPoint,
      remarkPointEnable,
      removeAllPoint,
      station,
      enableRemarkLine,
      remarkLineEnable,
      remarkAreaEnable,
      enableRemarkArea,
    };
  },
};
</script>

<style lang="scss">
body {
  margin: 0;
  padding: 0;
}

#cesiumContainer {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: -30px;
  z-index: -1;
}

.infoBox {
  height: 100vh;
  width: 20vw;
  z-index: 1000;
  background-color: #37a1ff30;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

  .operatorButton {
    width: 100%;
    position: relative;
    border-bottom: 1px solid white;

    .buttonContent {
      padding: 10px;
      border-radius: 5px;

      .el-card {
        opacity: 0.8;
        margin-bottom: 10px;

        > div {
          padding: 10px;
        }

        > div:last-child {
          padding-bottom: 0px;
        }

        .el-button {
          margin-bottom: 10px;
        }

      }

      .el-card:last-child {
        margin-bottom: 0;
      }

    }

  }

  .cameraPosition {
    position: relative;
    padding: 10px;
    width: calc(100% - 20px);

    .el-descriptions {
      background-color: white;

      padding: 10px;
      border-radius: 5px;
      opacity: 0.8;
      margin-bottom: 10px;
    }
  }
}

.modelBox {
  height: 100vh;
  width: 20vw;
  z-index: 1000;
  background-color: #37a1ff30;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

//.cesium-viewer-bottom {jj
//  display: none;
//}

</style>